<template>
    <div class="tour-detal">
        <div class="litem">
            <ul>
                <li class="clearfix">
                    <p class="name fl">产品名称：</p>
                    <p class="detal fr">{{details.tourTitle}}</p>
                </li>
                <li class="clearfix">
                    <p class="name fl">产品类型：</p>
                    <p class="detal fl" v-if="details.type=='onDay'">一日游</p>
                    <p class="detal fl" v-if="details.type=='nearby'">周边游</p>
                    <p class="detal fl" v-if="details.type=='demestic'">出境游</p>
                    <p class="detal fl" v-if="details.type=='outbound'">当地游</p>
                    <p class="detal fl" v-if="details.type=='localTourism'">当地游</p>
                    <p class="detal fl" v-if="details.type=='islandTourism'">海岛游</p>
                    <p class="detal fl" v-if="details.type=='other'">非团体旅游</p>
                </li>
                <li class="clearfix">
                    <p class="name fl">出发时间：</p>
                    <p class="detal fr">{{details.startDate}}</p>
                </li>
                <li class="clearfix">
                    <p class="name fl">应付金额：</p>
                    <p class="detal fr">¥{{details.totalPrice}}</p>
                </li>
            </ul>
        </div>
        <div class="line">联系人信息</div>
        <div class="litem">
            <ul>
                <li class="clearfix">
                    <p class="name fl">联系人</p>
                    <p class="detal fr">{{details.contractPerson}}</p>
                </li>
                <li class="clearfix">
                    <p class="name fl">手机号</p>
                    <p class="detal fr"> +86-{{details.phoneNum.replace(/^(\d{3})\d{4}(\d{4})$/,'$1****$2')}}</p>
                </li>
            </ul>
        </div>
        <div class="line">游客信息</div>
        <div class="litem">
            <ul v-for="(lists,index) in list">
                <li class="clearfix">
                    <p class="name fl">亲友姓名:
                        <span v-if="lists.touristType=='adult'">（成人）</span>
                        <span v-if="lists.touristType=='child'">（儿童）</span>
                    </p>
                    <p class="detal fr">{{lists.touristName}}</p>
                </li>
                <li class="clearfix">
                    <p class="name fl">亲友身份证：</p>
                    <p class="detal fr">{{lists.idCardNum.replace(/(\d{4})\d*([0-9a-zA-Z]{4})/,"$1******$2")}}</p>
                </li>
            </ul>
        </div>
        <div class="line">价格明细</div>
        <div class="litem">
            <ul>
                <li class="clearfix">
                    <p class="name fl">出行人数</p>
                    <p class="detal fr">{{details.numOfRelatives}}人</p>
                </li>
                <li class="clearfix">
                    <p class="name fl">订单总额</p>
                    <p class="detal fr"> ¥{{details.totalPrice}}</p>
                </li>
            </ul>
        </div>
        <div class="line">订单信息</div>
        <div class="litem">
            <ul>
                <li class="clearfix">
                    <p class="name fl">订单号</p>
                    <p class="detal fr">{{details.orderSn}}</p>
                </li>
                <li class="clearfix">
                    <p class="name fl">下单时间</p>
                    <p class="detal fr"> {{details.orderTime}}</p>
                </li>
            </ul>
        </div>
        <div class="btns">
            <!-- <p @click="toSubmitTour()">立即支付</p> -->
            <p v-if="details.orderStatus=='finished'">订单已完成</p>
            <p v-if="details.orderStatus=='canceled'">订单已取消</p>
            <p v-if="details.orderStatus=='paid'">待出行</p>
            <p v-if="details.orderStatus=='unPaid'" @click="toSubmitTour()">立即支付</p>
        </div>
        <!-- 支付密码 -->
        <div class="openups " v-if="isBshow=='false'">
            <div class="tanceng">
                <div class="hide" @click="isBshow='true'">
                    <img src="../../assets/imgs/order/back.png" alt="" width="100%" height="100%"/>
            </div>
                    <div class="shuom">
                        <span>请输入支付密码</span>
                    </div>
                    <div class="word">
                        <p class="top">
                            <input type="password" v-model="postPass.payPassword" placeholder="请输入支付密码">
                        </p>
                            <p class="wang" @click="direct('forgetPass')">忘记密码?</p>
                            <p class="rule">
                                <span @click="getPassword">确认</span>
                            </p>
                    </div>
                </div>
                <!-- <div class="sss"></div> -->
            </div>
            <!-- 支付密码 -->
            <!-- 提示弹层 -->
            <div class="openup " v-if="isAshow=='false'">
                <div class="tanceng">
                    <div class="hide" @click="isAshow='true'">
                        <img src="../../assets/imgs/order/erro.png" alt="" width="100%" height="100%"/>
                </div>
                        <div class="word">
                            <p class="top"><input type="checkbox" id="risk-use">将登陆密码作为支付密码 </p>
                                <p class="rule">
                                    <span @click="direct('setPassword')">设置</span>
                                    <span @click="getPaymentset">确认</span>
                                </p>
                        </div>
                    </div>
                    <div class="sss"></div>
                </div>
                <!-- 提示弹层 -->
            </div>
</template>

<script>
import http from "@/assets/js/axios";
import httpr from "@/assets/js/axiosr";
import { domain } from '@/assets/js/config'
import $ from 'jquery'
import { Toast } from 'mint-ui';
import { maskTips, maskCallback } from '@/assets/js/dom'
export default {
    data() {
        return {
            isAshow: 'true',
            isBshow: 'true',
            isCshow: false,
            userToken: '',
            userInfon: '',
            postPass: {   //支付密码
                payPassword: ''
            },
            postSet: {
                isSet: 'true'
            },
            upInfor: {
                orderId: '',
                totalPrice: ''
            },
            balance: '',
            details: '',
            list: [],
            queryParam: {
                orderId: ''
            }
        }
    },
    components: {

    },
    mounted() {
        let userToken = localStorage.getItem("token") || ''
        this.userToken = userToken
        let poctId = this.$route.query.id;
        this.queryParam.orderId = poctId
        this.upInfor.orderId = poctId
        // if (!this.userToken) {
        //     this.$router.push('/index')
        // }
        this.tourDetalNow()
        this.getPayment();
        this.userInforNow();
    },
    methods: {
        direct: function (val) {
            this.$router.push({ path: '/' + val });
        },
        // 是否存在支付密码
        getPayment: async function () {
            const res = await http.post('xshk/f/exist/pay/password?token=' + this.userToken)
            // console.log(res);
            this.userInfon = res.data
        },
        // 是否将登陆密码设置为支付密码
        getPaymentset: async function () {
            if ($('#risk-use').is(":checked")) {
                const res = await http.post('xshk/f/set/pay/password?token=' + this.userToken, this.postSet)
                // console.log(res);
                if (res.data.code == 0) {
                    maskTips({ id: 'no-risk' + new Date().getTime(), txt: res.data.message })
                    this.toSubmitTour()
                    this.isBshow = 'false'
                    this.isAshow = 'true'
                }
            } else {
                maskTips({ id: 'no-risk' + new Date().getTime(), txt: '请选择是否将登陆密码作为支付密码' })
            }
        },
        // 效验支付密码
        getPassword: async function () {
            this.isBshow = 'true'
            var that = this
            var userToken = localStorage.getItem('token')
            // console.log(this.postPass);
            if (this.postPass.payPassword) {
                const res = await http.post('xshk/f/check/pay/password?token=' + this.userToken, this.postPass)
                // console.log(res);
                if (res.data.code == 0) {
                    // maskTips({ id: 'noss-risksk' + new Date().getTime(), txt: res.data.message })
                    // console.log(555);
                    var self = this
                    // console.log(self.upInfor);
                    const res = await httpr.post('tour_order/order_pay?token=' + self.userToken, self.upInfor)
                    // console.log(res);
                    if (res.data.code == 100) {
                        Toast({ message: res.data.message, duration: 1000 })
                        this.$router.push('tourList')
                    } else {
                        Toast({ message: res.data.message, duration: 1000 })
                    }

                } else {
                    maskTips({ id: 'noss-risk' + new Date().getTime(), txt: res.data.message })
                }
            } else {
                maskTips({ id: "phoneh-fail" + new Date().getTime(), txt: "请输入密码后，再提交！" });
            }
        },
        // 验证支付密码
        toSubmitTour() {
            // this.hidemaskFlag = true
            var that = this
            if (this.details.totalPrice <= this.balance) {
                if (that.userInfon.code == 0) {
                    if (that.userInfon.data == 'notExist') {
                        this.isAshow = 'false'
                        // maskTips({ id: 'no-address' + new Date().getTime(), txt: that.userInfon.message })
                    } else {
                        this.isBshow = 'false'
                    }
                } else {
                    maskTips({ id: 'no-address' + new Date().getTime(), txt: that.userInfon.message })
                }
            } else {
                Toast({ message: '余额不足,请充值后支付订单', duration: 1000 })
                setTimeout(function () {
                    that.$router.push('rechargeFace')
                }, 1000)
            }
        },
        //蓄康荟余额信息
        userInforNow: async function () {
            const res = await http.post('xshk/f/assets/query?token=' + this.userToken)
            // console.log(res);
            if (res.data.code == 0) {
                this.balance = res.data.data.accountBalance
            } else {
                Toast({ message: res.data.message, duration: 1000 })
            }
        },
        //订单详情
        tourDetalNow: async function () {
            const res = await httpr.post('tour_order_search/detail?token=' + this.userToken, this.queryParam)
            // console.log(res);
            if (res.data.code == 100) {
                // Toast({ message: res.data.message, duration: 1000 })
                this.details = res.data.data
                this.list = res.data.data.touristList


                this.upInfor.totalPrice = res.data.data.totalPrice
            } else {
                Toast({ message: res.data.message, duration: 1000 })
            }
        },
    }
}
</script>

<style lang="stylus" scoped>
.tour-detal {
    .line {
        padding: 0 12px;
        width: 100%;
        height: 44px;
        line-height: 44px;
        background: rgba(240, 240, 240, 1);
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
    }

    .litem {
        padding: 0 12px;

        ul {
            li {
                padding: 5px 0;
                font-size: 14px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(153, 153, 153, 1);

                .name {
                    width: 130px;
                }

                .detal {
                    text-align: right;
                    width: 220px;
                }
            }
        }
    }

    .btns {
        margin: 15px auto;
        width: 330px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background: rgba(194, 223, 90, 1);
        border-radius: 10px;
        font-size: 18px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }

    /* Popup */
    .openup {
        max-width: 750px;

        .sss {
            position: fixed;
            overflow: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 5;
            background-color: rgba(55, 55, 55, 0.6);
        }

        .tanceng {
            max-width: 750px;
            position: fixed;
            z-index: 50;
            top: 150px;
            background-image: url('../../assets/imgs/order/bgc.png');
            background-size: 100% 100%;
            width: 100%;
            height: 300px;

            .hide {
                max-width: 750px;
                height: 30px;
                width: 30px;
                position: fixed;
                top: 150px;
                right: 70px;
                z-index: 99;
            }

            div.word {
                text-align: center;

                p.top {
                    margin-top: 200px;
                    color: #fff;
                    font-size: 15px;
                }

                p.rule {
                    font-size: 20px;
                    margin-top: 40px;
                    color: #fff;

                    span {
                        padding: 10px 45px;
                    }

                    span:nth-child(2) {
                        color: #C2DF5A;
                    }
                }
            }
        }
    }

    /* Popup */
    .openups {
        max-width: 750px;
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: #efefef;
        z-index: 666;

        // display: none;
        .sss {
            position: fixed;
            overflow: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 5;
            background-color: rgba(55, 55, 55, 0.6);
        }

        .tanceng {
            position: relative;
            max-width: 750px;
            width: 100%;
            height: 250px;

            .hide {
                max-width: 750px;
                height: 30px;
                width: 20px;
                position: absolute;
                top: -5px;
                left: 30px;
                z-index: 99;
            }

            div.shuom {
                color: #333;
                padding-top: 15px;
                font-size: 20px;
                text-align: center;
            }

            div.word {
                text-align: center;

                p.top {
                    margin-top: 10px;
                    color: #000;

                    input {
                        font-size: 20px;
                        text-align: center;
                        border-bottom: 1px solid #333;
                        background-color: #efefef;
                    }
                }

                p.wang {
                    text-align: right;
                    padding-top: 10px;
                    padding-right: 70px;
                    font-size: 6px;
                    color: #9CC900;
                }

                p.rule {
                    margin-top: 15px;
                    color: #000;

                    span {
                        font-size: 20px;
                        padding: 10px 100px;
                        border-radius: 20px;
                        color: #fff;
                        height: 50px;
                        width: 800px;
                        background-color: #C2DF5A;
                    }
                }
            }
        }
    }
}
</style>
